前一天把 app.py 拆開來看之後，現在至少知道 Flask 首頁是怎麼跑起來的。
但如果這真的是一個任務管理工具，現在看起來還太空了。
所以今天先不碰資料庫，也不做新增任務。
今天只做一件事：
把首頁先做成像一個任務管理 Web App。
我先不追求很漂亮。
只希望首頁有基本的區塊，讓後面的功能有地方可以放。
目前我想要：
但因為現在還沒有資料庫，所以任務列表先放假的範例資料。
等後面接上 MySQL，再把假資料換成真的。
這次我先給 Claude Code：
目前 Flask 首頁已經可以正常顯示 AI Task Manager。
今天只調整首頁畫面，不做任何後端新功能。
請幫我把首頁做成簡單的任務管理介面。
希望畫面包含：
1. 網站標題 AI Task Manager
2. 一個「新增任務」按鈕
3. 任務狀態篩選：
- 全部
- 待處理
- 進行中
- 已完成
4. 一個任務列表區塊
5. 先放 3 筆假的任務資料展示畫面
6. 每筆任務顯示：
- 任務名稱
- 狀態
- 分類
- 截止日期
7. 一個「分類管理」入口
目前不要：
- 接 MySQL
- 新增真正的任務 CRUD
- 修改 app.py 的後端邏輯
- 加入 Claude API
可以建立 static/css/style.css。
先告訴我準備修改或新增哪些檔案，
確認後再開始。
我這次還是沒有直接叫它：
幫我把首頁做漂亮一點。
因為「漂亮」太模糊。
我比較想先把畫面需要的東西列清楚。
今天主要會碰：
templates/index.html
static/css/style.css
專案會變成：
ai-task-manager/
├── app.py
├── requirements.txt
│
├── templates/
│ └── index.html
│
├── static/
│ └── css/
│ └── style.css
│
└── venv/
app.py 暫時不用改。
因為現在只是調整首頁顯示內容。
上一篇有提到 Flask 預設會從：
templates/
找 HTML。
CSS、JavaScript、圖片這些靜態檔案，通常會放在：
static/
所以這次新增：
static/css/style.css
可以先理解成：
templates/
放 HTML
static/
放 CSS、JavaScript、圖片
之後專案變大時還會繼續用到。
在 index.html 的 <head> 裡，需要把 CSS 引進來。
Flask 裡常見的寫法是：
<link
rel="stylesheet"
href="{{ url_for('static', filename='css/style.css') }}"
>
這裡第一次會看到：
{{ ... }}
這不是一般 HTML。
它是 Jinja2 的模板語法。
url_for() 是什麼？這一段：
{{ url_for('static', filename='css/style.css') }}
是在請 Flask 幫忙產生 style.css 的網址。
最後瀏覽器實際拿到的內容會類似：
/static/css/style.css
所以我們不用自己把完整路徑硬寫死。
目前先知道：
url_for()
→ 幫我們產生網址
'static'
→ Flask 的靜態檔案位置
filename='css/style.css'
→ 要找的 CSS 檔案
就夠了。
Jinja2 後面真的開始把任務資料送進 HTML 時，還會再次碰到。
因為還沒接 MySQL，所以今天首頁上的任務都是假的。
資料目前只是直接寫在 HTML 裡。
它們不會真的儲存，也不能修改。
重新整理畫面還是會看到一樣的內容。
這只是先用來看版面。
我希望首頁先分成幾個簡單區域。
AI Task Manager
────────────────────────
[ + 新增任務 ] [ 分類管理 ]
[ 全部 ] [ 待處理 ] [ 進行中 ] [ 已完成 ]
我的任務
┌────────────────────────────┐
│ 整理期末專題需求 │
│ 待處理｜ 學習 ｜2026/09/25 │
└────────────────────────────┘
┌────────────────────────────┐
│ 完成首頁介面設計 │
│ 進行中｜專案｜2026/09/22 │
└────────────────────────────┘
現在按鈕可以先只是畫面。
點下去還不用真的發生事情。
一開始我本來會覺得：
既然按鈕不能用，那現在做它幹嘛？
但後來想了一下，先做畫面其實有一個好處。
我可以先知道後面需要哪些資料。
例如一筆任務現在顯示：
任務名稱
狀態
分類
截止日期
那後面設計 MySQL 的 tasks 表時，就很容易知道至少會需要：
title
status
category_id
due_date
畫面跟資料庫其實會慢慢接起來。
確認完它準備修改的檔案後，就可以讓 Claude Code 開始。
完成後，我會先看：
templates/index.html
確認沒有突然加入 JavaScript 框架，或自己把功能擴大。
接著再看：
static/css/style.css
確認目前只是樣式。
如果它突然做了：
fetch()
API
資料庫
表單提交
就超出今天的範圍了。
完成後，首頁大概變成這個樣子：
目前可以看到：
不過這些內容目前都還只是靜態畫面。
如果 Flask 還在執行：
python app.py
或 macOS：
python3 app.py
因為目前有：
debug=True
修改檔案後通常會自動重新載入。
直接重新整理：
http://127.0.0.1:5000
就可以看到新首頁。
如果 Flask 已經停掉，就重新啟動：
python app.py
python3 app.py
如果 HTML 有變，但畫面完全沒有 CSS，可以先檢查：
static/
└── css/
└── style.css
路徑是不是正確。
再確認 index.html 有沒有：
<link
rel="stylesheet"
href="{{ url_for('static', filename='css/style.css') }}"
>
也可以直接在瀏覽器打開：
http://127.0.0.1:5000/static/css/style.css
如果可以看到 CSS 內容，代表 Flask 找得到這個檔案。
這次我還是會特別限制它：
目前只做靜態畫面。
所有按鈕暫時不需要有功能，
也不要建立 API 或資料庫邏輯。
因為「新增任務」這四個字對 Claude Code 來說，很容易被理解成：
那我順便幫你把新增功能寫好。
但那是後面的事情。
今天只是：
把按鈕放上去
不是：
讓按鈕真的可以新增資料
如果它完成 CSS 後，我看到很多：
display: flex;
gap: 16px;
padding: 20px;
border-radius: 8px;
不熟悉的話，可以直接問：
請不要修改任何檔案。
請解釋目前 static/css/style.css。
不用每一個 CSS 屬性都講很深，
只要告訴我：
1. 每個區塊大概控制哪一部分畫面
2. flex 是拿來做什麼
3. gap、padding、margin 有什麼差別
4. 哪些數值之後可以自己調整
我比較想知道目前畫面為什麼會長這樣，而不是只看到 Claude Code 幫我「美化完成」。
目前大概會變成：
ai-task-manager/
├── app.py
├── requirements.txt
│
├── templates/
│ └── index.html
│
├── static/
│ └── css/
│ └── style.css
│
└── venv/
跟 Day 6 相比，只多了一個：
static/css/style.css
但畫面應該已經會差很多。
這點要記得。
目前畫面可能已經很像任務管理工具。
但它還只是 HTML。
現在如果我真的想新增第四個任務，只能自己打開 index.html 加一段。
這顯然不是最後要的做法。
接下來真正要處理的，就是：
任務到底要存在哪裡？
這時 MySQL 就要開始出場了。
今天沒有增加真正的任務功能。
只是把原本：
AI Task Manager
一行文字的首頁，先整理成任務管理系統的樣子。
目前可以看到：
標題
新增任務按鈕
分類管理
狀態篩選
任務列表
但全部都還是靜態的。
下一步開始，這個專案就要第一次碰到真正的資料。
iThome鐵人賽
看影片追技術